<template>
    <div class="qilin-headerNav">
        <div class="qilin-headerNav-project">
            <img src="@/assets/images/projectIcon.png" alt="">
            <span>职级管理系统</span>
        </div>
        <div class="qilin-headerNav-menu">
            <router-link class="qilin-headerNav-menu-item" to="/pRank"
                :class="$route.name === 'pRank' ? 'is-active' : '' "
            >
                <img src="@/assets/images/pRank.png" alt="">
                <span>P职级积分</span>
            </router-link>
            <!-- <router-link class="qilin-headerNav-menu-item" to="/onePosition"
                :class="$route.name === 'onePosition' ? 'is-active' : '' "
            >
                <img src="@/assets/images/onePosition.png" alt="">
                <span>一体化积分</span>
            </router-link> -->
        </div>
        <div class="qilin-headerNav-user">
            <el-button size="mini" type="primary" @click="syncUserInfoData()">同步信息</el-button>
            <img src="@/assets/images/user.png" alt="">
            <span>{{userInfo.name}}</span>
        </div>
    </div>
</template>
<script>
// import {mapState,mapGetters,mapMutations} from "vuex";
export default {
    computed:{
        userInfo(){
            return this.$store.getters.userInfo
        }
        // ...mapState({userInfo:(state)=>state.userInfo}),
        // ...mapState(["userInfo"])
        // ...mapState({userInfo:"userInfo"})
        // ...mapGetters(["userInfo"]),
        // ...mapGetters({userInfo:"userInfo"}),
    },
    methods:{
        // ...mapMutations(["set_userInfo"]),
        // ...mapMutations({add:"set_userInfo"}),
        // 同步用户信息
        syncUserInfoData(){
            this.$store.dispatch("syncUserInfoData").then((res)=>{
                if(res){
                    this.$message({
                        message:res.message || "同步成功",
                        type:"success"
                    });
                }
            });
            // syncUserInfoData().then((res)=>{
            //     // console.log(res);
            //     if(res.code === 200){
            //         this.$message({
            //             message:res.message || "同步成功",
            //             type:"success"
            //         });
            //     }
            // });
        }
    }
}
</script>
<style lang="scss" scoped>
.qilin-headerNav{
    @include setWH(100%,60px);
    background-image: linear-gradient(180deg, #264577 0%, #142D55 100%);
    color:$color-text;
    padding:10px 15px;
    @include flexCenter(space-between,center);
    >.qilin-headerNav-project{
        @include flexCenter(center,center);
        font-size:$size-text-medium;
        >img{
            @include setWH(30px,30px);
            margin-right:9px;
        }
    }
    >.qilin-headerNav-menu{
        @include flexCenter(center,center);
        >.qilin-headerNav-menu-item{
            @include flexCenter(center,center);
            margin-right:20px;
            padding:4px 10px;
            border-radius:2px;
            cursor:pointer;
            color:$color-text;
            text-decoration:none;
            >img{
                @include setWH(15px,15px);
                margin-right:10px;
            }
            &.is-active{
                background:linear-gradient(148deg, #90BAFB 0%, #3B82F1 100%);;
            }
        }
    }
    >.qilin-headerNav-user{
        @include flexCenter(center,center);
        cursor:pointer;
        >.el-button{
            margin-right:15px;
        }
        >img{
            @include setWH(24px,24px);
            margin-right:9px;
        }
    }
}
</style>
